<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name=viewport content="width=device-width,initial-scale=1">
	<style>

		*{
			margin:0px;
			padding: 0px;
			box-sizing: border-box;
		}
		.xbs-1,.xbs-2,.xbs-3,.xbs-4,.xbs-5,.xbs-6,.xbs-7,.xbs-8,.xbs-9,.xbs-10,.xbs-11,.xbs-12{
			float: left;
			width: 100%;
			padding: 15px;
		}
		
	
		@media screen and (min-width: 768px) {
		    .xbs-1{
			width: 8.333%;
			}
			.xbs-2{
				width: 16.666%;
			}
			.xbs-3{
				width: 25%;
			}
			.xbs-4{
				width: 33.333%;
			}
			.xbs-5{
				width: 41.666%;
			}
			.xbs-6{
				width: 50%;
			}
			.xbs-7{
				width: 58.333%
			}
			.xbs-8{
				width: 66.666%;
			}
			.xbs-9{
				width:75%; 
			}
			.xbs-10{
				width: 83.333%
			}
			.xbs-11{
				width: 91.666%;
			}
			.xbs-12{
				width: 100%;
			}
		}

		.main{
			background: red url() 0 0 no-repeat;
			/*max-width: 800px;*/
			margin: 0 auto;
		}

		div{
			background: #fff url() 0 0 no-repeat;
		}

		.left-box{
			background: blue url() 0 0 no-repeat;
			height: 200px;
		}
		.right-box{
			background: red url() 0 0 no-repeat;
			height: 200px;
		}

	</style>
</head>
<body>
	<div class="main">
		<div class="xbs-12 mid">
			<div class="xbs-8">
				<div class="right-box">
					right
				</div>
			</div>
			<div class="xbs-4">
				<div class="left-box">
					left
				</div>
			</div>
		</div>
	</div>
</body>
</html>